<!--
 * @Author: your name
 * @Date: 2022-04-27 09:37:46
 * @LastEditTime: 2024-08-26 10:49:55
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ResourceCenter\index.vue
-->

<template>
  <!-- 资源中心页 -->
  <div id="container">
    <!-- 左侧悬浮栏 -->
    <div class="caidan">
      <div class="floatingLeft">
        <ul>
          <li
            @click="goToAnchor('#jsjy', 1)"
            :class="{ choseLi: leftValue == 1 }"
            v-if="dingzhiNj_id != 11"
            v-show="jsjyShow"
          >
            教师教研
          </li>
          <li
            @click="goToAnchor('#jsjx', 2)"
            :class="{ choseLi: leftValue == 2 }"
            v-if="dingzhiNj_id != 11"
            v-show="jsjxShow"
          >
            教师教学
          </li>
          <li
            @click="goToAnchor('#xsxx', 3)"
            :class="{ choseLi: leftValue == 3 }"
            v-if="dingzhiNj_id != 11"
            v-show="xsxxShow"
          >
            学生学习
          </li>
          <li
            @click="goToAnchor('#yilun', 4)"
            :class="{ choseLi: leftValue == 4 }"
            v-if="dingzhiNj_id == 11"
            v-show="yilunCHshow || yilunENshow"
          >
            一轮复习
          </li>
          <li
            @click="goToAnchor('#erlun', 5)"
            :class="{ choseLi: leftValue == 5 }"
            v-if="dingzhiNj_id == 11"
            v-show="erlunCHshow || elunENshow"
          >
            二轮复习
          </li>
          <li
            @click="goToAnchor('#beizhan', 6)"
            :class="{ choseLi: leftValue == 6 }"
            v-if="dingzhiNj_id == 11"
            v-show="beizhanPicLists.length != 0">
          
            备战高考
          </li>
          <li
            @click="goToAnchor('#zuixinziyuan', 7)"
            :class="{ choseLi: leftValue == 7 }"
          >
            精品试卷
          </li>
          <li
            @click="goToAnchor('#jingxuansucai', 8)"
            :class="{ choseLi: leftValue == 8 }"
          >
            精选素材
          </li>
        </ul>
      </div>
    </div>
    <!-- 顶部计划栏 -->
    <div class="plan" v-if="start_date != 'none'">
      <div class="title">
        <h3>教学计划</h3>
        <div class="change" @click="goplan">
          <img src="../../assets/img/resource/edit.png" alt="" />
          查看完整计划
        </div>
      </div>
      <div class="jindu">
        <div class="msg">
          <span>当前进度：</span>
          <p>{{ base_title }}</p>
        </div>
        <div class="jihuatips">
          <div class="startTitle">
            <p v-if="kejianchapters_title != ''">
              {{ kejianchapters_title }} 开始
            </p>
            <p v-if="kejianchapters_title == ''">{{ timeline_title }} 开始</p>
          </div>
          <div class="endTitle">
            <p v-if="kejianchapters_title != ''">
              {{ kejianchapters_title }} 结束
            </p>
            <p v-if="kejianchapters_title == ''">{{ timeline_title }} 结束</p>
          </div>
          <div class="jhbefore">
            <img src="../../assets/img/4.2/4.2planTipsnow.png" alt="" />
            <span>{{ timeStamp2String(before7, 13) }}</span>
          </div>
          <div class="jdt finished">
            <p>备课资源包推送</p>
          </div>
          <div class="jhstart">
            <img src="../../assets/img/4.2/4.2planTipsnow.png" alt="" />
            <span>{{ timeStamp2String(sTime, 13) }}</span>
          </div>
          <div class="jdt ing">
            <p><span>教学资源包推送</span><span>复习资源包推送</span></p>
          </div>
          <div class="jhend">
            <img src="../../assets/img/4.2/4.2planTipsnover.png" alt="" />
            <span>{{ timeStamp2String(eTime, 13) }}</span>
          </div>
          <div class="jdt" style="background: #f5f8fa"></div>
          <div class="final">
            <img src="../../assets/img/4.2/4.2planTipsnover.png" alt="" />
          </div>
          <!-- <span>{{timeStamp2String(sTime,3)}}</span>
          <span>{{timeStamp2String(etime,3)}}</span> -->
        </div>
      </div>
    </div>
    <!-- 资源板块 -->
    <div class="content">
      <div class="left">
        <!-- 无计划展示 -->
        <div class="noplan" v-if="start_date == 'none'">
          <div class="msg">
            <h4>当前时间段内您未设置教学计划</h4>
            <p>快点击<a @click="goEditPlan">【我的教学计划】</a>去设置吧</p>
          </div>
        </div>
        <!-- 高一高二内容 -->
        <div class="gaoyier" v-if="dingzhiNj_id != 11">
          <!-- 教师教研 -->
          <div class="jsjy zyb" id="jsjy" v-show="jsjyShow">
            <div class="boxTitle">
              <h4>教师教研</h4>
            </div>
            <div
              class="ziyuanbaoLists"
              v-for="item in jsjyzyb"
              :key="item.id"
              @click="goresDetails(item.id, item.lx, item.suffix)"
            >
              <div class="pic" v-if="item.lx == 2">
                <img src="../../assets/img/ziyuanbaonew.png" />
              </div>
              <div class="pic" v-if="item.lx == 1">
                  <img
                    src="../../assets/img/resFile (1).png"
                    alt="file_url"
                    v-if="
                      item.suffix == 'ppt' ||
                      item.suffix == 'pptx' ||
                      item.suffix == 'ppsx' ||
                      item.suffix == 'pps'
                    "
                  />
                  <img
                    src="../../assets/img/resFile (2).png"
                    alt="file_url"
                    v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
                  />
                  <img
                    src="../../assets/img/resFile (3).png"
                    alt="file_url"
                    v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
                  />
                  <img
                    src="../../assets/img/resFile (4).png"
                    alt="file_url"
                    v-if="item.suffix == 'zip' || item.suffix == 'rar'"
                  />
                  <img
                    src="../../assets/img/resFile (5).png"
                    alt="file_url"
                    v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
                  />
                  <img
                    src="../../assets/img/resFile (6).png"
                    alt="file_url"
                    v-if="item.suffix == 'doc' || item.suffix == 'docx'"
                  />
                  <img
                    src="../../assets/img/resFile (7).png"
                    alt="file_url"
                    v-if="item.suffix == 'pdf'"
                  />
                  <img
                    src="../../assets/img/resFile (8).png"
                    alt="file_url"
                    v-if="item.suffix == 'png' || item.suffix == 'jpg'"
                  />
              </div>
              <div class="msg">
                <div class="kejiantitle">
                  <p>
                    {{ item.title }}
                  </p>
                </div>
                <div class="ziyuanbaodetails">
                  <span>内含：</span>
                  <span
                    class="leixing"
                    v-for="list in item.kejianfl_arr"
                    :key="list.kejianfl_id"
                    >{{ list.kejianfl_title }}</span
                  >
                  <span
                    >共<a>{{ item.kejian_nums?item.kejian_nums:1 }}</a
                    >份资源</span
                  >
                </div>
                <div class="bottom">
                  <span class="upTime"
                    >更新于{{
                      timeStamp2String(item.update_time * 1000, 2)
                    }}</span
                  >
                  <span class="seeNum"
                    ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                  >
                </div>
              </div>
            </div>
            <div class="jiaoxueke">
              <div class="jiaoyan">
                <div
                  class="box"
                  v-for="item in jsjysp"
                  :key="item.jyjxk_id"
                  @click="goJiaoyanclass(item.jyjxk_id)"
                >
                  <img :src="item.file_url" />
                  <div class="activename">
                    {{ item.title }}
                  </div>
                  <p>主讲人：{{ item.teachers_title }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 教师教学 -->
          <div class="jsjx zyb" id="jsjx" v-show="jsjxShow">
            <div class="boxTitle">
              <h4>教师教学</h4>
            </div>
            <div
              class="ziyuanbaoLists"
              v-for="item in jsjxzyb"
              :key="item.id"
              @click="goresDetails(item.id, item.lx, item.suffix)"
            >
              <div class="pic" v-if="item.lx == 2">
                <img src="../../assets/img/ziyuanbaonew.png" />
              </div>
              <div class="pic" v-if="item.lx == 1">
                  <img
                    src="../../assets/img/resFile (1).png"
                    alt="file_url"
                    v-if="
                      item.suffix == 'ppt' ||
                      item.suffix == 'pptx' ||
                      item.suffix == 'ppsx' ||
                      item.suffix == 'pps'
                    "
                  />
                  <img
                    src="../../assets/img/resFile (2).png"
                    alt="file_url"
                    v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
                  />
                  <img
                    src="../../assets/img/resFile (3).png"
                    alt="file_url"
                    v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
                  />
                  <img
                    src="../../assets/img/resFile (4).png"
                    alt="file_url"
                    v-if="item.suffix == 'zip' || item.suffix == 'rar'"
                  />
                  <img
                    src="../../assets/img/resFile (5).png"
                    alt="file_url"
                    v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
                  />
                  <img
                    src="../../assets/img/resFile (6).png"
                    alt="file_url"
                    v-if="item.suffix == 'doc' || item.suffix == 'docx'"
                  />
                  <img
                    src="../../assets/img/resFile (7).png"
                    alt="file_url"
                    v-if="item.suffix == 'pdf'"
                  />
                  <img
                    src="../../assets/img/resFile (8).png"
                    alt="file_url"
                    v-if="item.suffix == 'png' || item.suffix == 'jpg'"
                  />
              </div>
              <div class="msg">
                <div class="kejiantitle">
                  <p>
                    {{ item.title }}
                  </p>
                </div>
                <div class="ziyuanbaodetails">
                  <span>内含：</span>
                  <span
                    class="leixing"
                    v-for="list in item.kejianfl_arr"
                    :key="list.kejianfl_id"
                    >{{ list.kejianfl_title }}</span
                  >
                  <span
                    >共<a>{{ item.kejian_nums?item.kejian_nums:1 }}</a
                    >份资源</span
                  >
                </div>
                <div class="bottom">
                  <span class="upTime"
                    >更新于{{
                      timeStamp2String(item.update_time * 1000, 2)
                    }}</span
                  >
                  <span class="seeNum"
                    ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                  >
                </div>
              </div>
            </div>
            <div class="jiaoxueke">
              <div class="jiaoyan">
                <div
                  class="box"
                  v-for="item in jsjxsp"
                  :key="item.jyjxk_id"
                  @click="goJiaoyanclass(item.jyjxk_id)"
                >
                  <img :src="item.file_url" />
                  <div class="activename">
                    {{ item.title }}
                  </div>
                  <p>主讲人：{{ item.teachers_title }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 学生学习 -->
          <div class="xsxx zyb" id="xsxx" v-show="xsxxShow">
            <div class="boxTitle">
              <h4>学生学习</h4>
            </div>
            <div
              class="ziyuanbaoLists"
              v-for="item in xsxxzyb"
              :key="item.id"
              @click="goresDetails(item.id, item.lx, item.suffix)"
            >
              <div class="pic" v-if="item.lx == 2">
                <img src="../../assets/img/ziyuanbaonew.png" />
              </div>
              <div class="pic" v-if="item.lx == 1">
                  <img
                    src="../../assets/img/resFile (1).png"
                    alt="file_url"
                    v-if="
                      item.suffix == 'ppt' ||
                      item.suffix == 'pptx' ||
                      item.suffix == 'ppsx' ||
                      item.suffix == 'pps'
                    "
                  />
                  <img
                    src="../../assets/img/resFile (2).png"
                    alt="file_url"
                    v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
                  />
                  <img
                    src="../../assets/img/resFile (3).png"
                    alt="file_url"
                    v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
                  />
                  <img
                    src="../../assets/img/resFile (4).png"
                    alt="file_url"
                    v-if="item.suffix == 'zip' || item.suffix == 'rar'"
                  />
                  <img
                    src="../../assets/img/resFile (5).png"
                    alt="file_url"
                    v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
                  />
                  <img
                    src="../../assets/img/resFile (6).png"
                    alt="file_url"
                    v-if="item.suffix == 'doc' || item.suffix == 'docx'"
                  />
                  <img
                    src="../../assets/img/resFile (7).png"
                    alt="file_url"
                    v-if="item.suffix == 'pdf'"
                  />
                  <img
                    src="../../assets/img/resFile (8).png"
                    alt="file_url"
                    v-if="item.suffix == 'png' || item.suffix == 'jpg'"
                  />
              </div>
              <div class="msg">
                <div class="kejiantitle">
                  <p>
                    {{ item.title }}
                  </p>
                </div>
                <div class="ziyuanbaodetails">
                  <span>内含：</span>
                  <span
                    class="leixing"
                    v-for="list in item.kejianfl_arr"
                    :key="list.kejianfl_id"
                    >{{ list.kejianfl_title }}</span
                  >
                  <span
                    >共<a>{{ item.kejian_nums?item.kejian_nums:1 }}</a
                    >份资源</span
                  >
                </div>
                <div class="bottom">
                  <span class="upTime"
                    >更新于{{
                      timeStamp2String(item.update_time * 1000, 2)
                    }}</span
                  >
                  <span class="seeNum"
                    ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                  >
                </div>
              </div>
            </div>
            <div class="jiaoxueke">
              <div class="jiaoyan">
                <div
                  class="box"
                  v-for="item in xsxxsp"
                  :key="item.jyjxk_id"
                  @click="goJiaoyanclass(item.jyjxk_id)"
                >
                  <img :src="item.file_url" />
                  <div class="activename">
                    {{ item.title }}
                  </div>
                  <p>主讲人：{{ item.teachers_title }}</p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="test"
            v-if="fk_status == 0 && fkshow"
            v-show="jsjyShow || jsjxShow || xsxxShow"
          >
            <p>以上推荐对你是否有用？</p>
            <el-radio-group v-model="radio" @change="youyong">
              <el-radio label="0">没用</el-radio>
              <el-radio label="1">有用</el-radio>
            </el-radio-group>
            <button @click="submitTest">提交</button>
          </div>
          <!-- 没有资源时候的图书 -->
          <div
            class="jsjx zyb"
            id="jsjx"
            v-show="!jsjxShow && !jsjyShow && !xsxxShow && prList.length != 0"
          >
            <div class="boxTitle">
              <h4>图书推荐</h4>
            </div>
            <div
              class="productLists"
              v-for="item in prList"
              :key="item.id"
              @click="productDetails(item.id, item.type_id)"
            >
              <div class="pic">
                <img :src="item.file_url" alt="" />
              </div>
              <div class="msg">
                <div class="booktitle">{{ item.title }}</div>
                <!-- <div class="author">权威编者：{{ item.author }}</div> -->
                <div class="author">{{ item.synopsis }}</div>
              </div>
              <div
                class="goProduct"
                @click="productDetails(item.id, item.type_id)"
              >
                查看样书
              </div>
            </div>
          </div>
        </div>
        <div class="gaosan" v-if="dingzhiNj_id == 11">
          <!-- 一轮复习 语文-->
          <div class="yilun" id="yilun" v-if="kemu_id == 1 && yilunCHshow">
            <div class="yiluntitle">
              <h4>一轮复习</h4>
            </div>
            <div class="piclists">
              <img
                :src="item.file_url"
                v-for="(item, index) in yilunCHlist"
                :key="index"
                @click="
                  gogszx(
                    item.kejianbooks_id,
                    item.kejianchapters_id,
                    item.kejianfl_id,
                    item.kejiantag_id,
                    item.kemu_id,
                    item.nianji_id,
                    item.title,
                    item.type_id,
                    index,
                    yilunCHlist
                  )
                "
              />
            </div>
          </div>
          <!-- 二轮复习 语文 -->
          <div class="erlunyw" id="erlun" v-if="kemu_id == 1 && erlunCHshow">
            <div class="erluntitle">
              <h4>二轮复习</h4>
            </div>
            <div class="piclists">
              <img
                :src="item.file_url"
                v-for="(item, index) in erlunCHlist"
                :key="index"
                @click="
                  gogszx(
                    item.kejianbooks_id,
                    item.kejianchapters_id,
                    item.kejianfl_id,
                    item.kejiantag_id,
                    item.kemu_id,
                    item.nianji_id,
                    item.title,
                    item.type_id,
                    index,
                    erlunCHlist
                  )
                "
              />
            </div>
          </div>
          <!-- 一轮复习 英语-->
          <div class="yilun" id="yilun" v-if="kemu_id == 3 && yilunENshow">
            <div class="yiluntitle">
              <h4>一轮复习</h4>
            </div>
            <div class="piclists">
              <img
                :src="item.file_url"
                v-for="item in yilunENlist"
                :key="item.id"
                @click="gochyf(item.id, item.title, 1)"
              />
            </div>
          </div>
          <!-- 二轮复习英语  -->
          <div class="yilun" id="erlun" v-if="kemu_id == 3 && elunENshow">
            <div class="yiluntitle">
              <h4>二轮复习</h4>
            </div>
            <div class="piclists">
              <img
                :src="item.file_url"
                v-for="item in erlunENlist"
                :key="item.id"
                @click="gochyf(item.id, item.title, 2)"
              />
            </div>
          </div>
          <!-- 备战高考  -->
          <div class="beizhan" id="beizhan" v-if="beizhanPicLists.length !=0">
            <div class="yiluntitle">
              <h4>备战高考</h4>
            </div>
            <div class="piclists">
              <img
                :src="item.file_url"
                v-for="item in beizhanPicLists"
                :key="item.id"
                @click="beizhanUrl(item.http_url)"
              />
            </div>
          </div>
          <!-- 二轮复习英语  弃用-->
          <!-- <div class="erlun" id="erlun" v-if="kemu_id == 3 && elunENshow">
            <div class="erluntitle">
              <h4>二轮复习</h4>
            </div>
            <div class="kejianLists" v-for="item in erlunENlist" :key="item.id">
              <div
                class="kejianbox"
                @click="goresDetails(item.id, item.lx, item.suffix)"
              >
                <div class="pic">
                  <img
                    src="../../assets/img/resFile (1).png"
                    alt="file_url"
                    v-if="
                      item.suffix == 'ppt' ||
                      item.suffix == 'pptx' ||
                      item.suffix == 'ppsx' ||
                      item.suffix == 'pps'
                    "
                  />
                  <img
                    src="../../assets/img/resFile (2).png"
                    alt="file_url"
                    v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
                  />
                  <img
                    src="../../assets/img/resFile (3).png"
                    alt="file_url"
                    v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
                  />
                  <img
                    src="../../assets/img/resFile (4).png"
                    alt="file_url"
                    v-if="item.suffix == 'zip' || item.suffix == 'rar'"
                  />
                  <img
                    src="../../assets/img/resFile (5).png"
                    alt="file_url"
                    v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
                  />
                  <img
                    src="../../assets/img/resFile (6).png"
                    alt="file_url"
                    v-if="item.suffix == 'doc' || item.suffix == 'docx'"
                  />
                  <img
                    src="../../assets/img/resFile (7).png"
                    alt="file_url"
                    v-if="item.suffix == 'pdf'"
                  />
                  <img
                    src="../../assets/img/resFile (8).png"
                    alt="file_url"
                    v-if="item.suffix == 'png' || item.suffix == 'jpg'"
                  />
                </div>
                <div class="msg">
                  <div class="boxtitle">
                    <p>
                      {{ item.title }}
                    </p>
                  </div>
                  <div class="bottom">
                    <span class="rate"
                      ><span style="margin-right: 5px">精选指数</span>
                      <el-rate disabled v-model="item.tjzs"></el-rate
                    ></span>
                    <span class="seeNum"
                      ><i class="el-icon-view"></i>{{ item.viewCount }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
        <!-- 资源列表 -->
        <div class="zuixinziyuan ziyuan" id="zuixinziyuan">
          <div class="boxTitle">
            <h4>精品试卷</h4>
            <p @click="sjseemore">查看更多</p>
          </div>
          <div class="ziyuancontent">
            <div
              class="ziyuanLists"
              v-for="item in newLists"
              :key="item.id"
              @click="goresDetails(item.id, item.lx, item.suffix)"
            >
              <img
                src="../../assets/img/ziyuan.png"
                v-if="item.lx == 2"
                style="height: 74px"
              />
              <img
                src="../../assets/img/resFile (1).png"
                alt="file_url"
                v-if="
                  item.suffix == 'ppt' ||
                  item.suffix == 'pptx' ||
                  item.suffix == 'ppsx' ||
                  item.suffix == 'pps'
                "
              />
              <img
                src="../../assets/img/resFile (2).png"
                alt="file_url"
                v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
              />
              <img
                src="../../assets/img/resFile (3).png"
                alt="file_url"
                v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
              />
              <img
                src="../../assets/img/resFile (4).png"
                alt="file_url"
                v-if="item.suffix == 'zip' || item.suffix == 'rar'"
              />
              <img
                src="../../assets/img/resFile (5).png"
                alt="file_url"
                v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
              />
              <img
                src="../../assets/img/resFile (6).png"
                alt="file_url"
                v-if="item.suffix == 'doc' || item.suffix == 'docx'"
              />
              <img
                src="../../assets/img/resFile (7).png"
                alt="file_url"
                v-if="item.suffix == 'pdf'"
              />
              <img
                src="../../assets/img/resFile (8).png"
                alt="file_url"
                v-if="item.suffix == 'png' || item.suffix == 'jpg'"
              />
              <p>
                <img src="../../assets/img/newBiaoqian.png" v-show="item.is_new == 1">
                {{ item.title }}
              </p>
            </div>
          </div>
        </div>
        <!-- 资源列表 -->
        <div class="jingxuansucai ziyuan" id="jingxuansucai">
          <div class="boxTitle">
            <h4>精选素材</h4>
            <p @click="scseemore">查看更多</p>
          </div>
          <div class="ziyuancontent">
            <div
              class="ziyuanLists"
              v-for="item in sucaiLists"
              :key="item.id"
              @click="goresDetails(item.id, item.lx, item.suffix)"
            >
              <img
                src="../../assets/img/ziyuan.png"
                v-if="item.lx == 2"
                style="height: 74px"
              />
              <img
                src="../../assets/img/resFile (1).png"
                alt="file_url"
                v-if="
                  item.suffix == 'ppt' ||
                  item.suffix == 'pptx' ||
                  item.suffix == 'ppsx' ||
                  item.suffix == 'pps'
                "
              />
              <img
                src="../../assets/img/resFile (2).png"
                alt="file_url"
                v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
              />
              <img
                src="../../assets/img/resFile (3).png"
                alt="file_url"
                v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
              />
              <img
                src="../../assets/img/resFile (4).png"
                alt="file_url"
                v-if="item.suffix == 'zip' || item.suffix == 'rar'"
              />
              <img
                src="../../assets/img/resFile (5).png"
                alt="file_url"
                v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
              />
              <img
                src="../../assets/img/resFile (6).png"
                alt="file_url"
                v-if="item.suffix == 'doc' || item.suffix == 'docx'"
              />
              <img
                src="../../assets/img/resFile (7).png"
                alt="file_url"
                v-if="item.suffix == 'pdf'"
              />
              <img
                src="../../assets/img/resFile (8).png"
                alt="file_url"
                v-if="item.suffix == 'png' || item.suffix == 'jpg'"
              />
              <p>
                <img src="../../assets/img/newBiaoqian.png" v-show="item.is_new == 1">
                {{ item.title }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="rightContent">
          <!-- 资源订阅 -->
          <div class="ziyuandingyue" v-if="zydyList.length != 0">
            <div class="dingyuetitle">
              <div class="boxtitle">
                <img src="../../assets/img/4.2/4.2dingyue.png" alt="" />
                <h4>资源订阅</h4>
              </div>
              <span class="seemore" @click="gosubscription"> 查看更多 </span>
            </div>
            <div class="dingyueLists">
              <div
                class="dingyuebox"
                v-for="item in zydyList"
                :key="item.id"
                @click="goSubDeta(item.id)"
              >
                <p>{{ item.title }}</p>
                <div class="dingyue dy" v-if="item.dy_status == 0">
                  <i class="el-icon-plus"></i>订阅
                </div>
                <div class="yidingyue dy" v-if="item.dy_status == 1">
                  已订阅
                </div>
              </div>
            </div>
          </div>
          <!-- 产品推荐 -->
          <div class="productTuijian" v-if="hotsearchbooklist.length != 0">
            <div class="productLists">
              <div class="boxtitle">
                <img src="../../assets/img/4.2/4.2cankao.png" alt="" />
                <h4>参考资料推荐</h4>
              </div>
              <div
                class="boxHot"
                v-for="(item, index) in hotsearchbooklist"
                :key="item.id"
                @click="productDetails(item.id, item.type_id)"
                v-show="hotsearchbooklist.length != 0"
              >
                <div class="qian3" v-if="index + 1 <= 3">
                  <div class="pic">
                    <img :src="item.file_url" alt="" />
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="msg">
                    <h3>{{ item.title }}</h3>
                    <!-- <p>权威编者：{{ item.author }}</p> -->
                    <div
                      class="goProduct"
                      @click="productDetails(item.id, item.type_id)"
                    >
                      查看样书
                    </div>
                  </div>
                </div>
                <div class="lists" v-if="index + 1 > 3">
                  <h4>{{ index + 1 }}</h4>
                  <p>{{ item.title }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fenge"></div>
  </div>
</template>

<script>
import { timeStamp2String } from "../../utils/time";
import {
  list_kejianbao,
  kejianfl,
  list_kejiantag,
  nowkemu,
  userinfo,
  bookslists,
  chapterslists,
  list_kejian,
  chaptersinfo,
  jyjxkinfolists,
  tjlists,
  zyzxinfo,
  zyzxgs,
  zyzxfk,
  list_jyjxk,
  chapterskejian,
  chapterskejian_new,
  productinfo,
  list_kejiandingyue_tj,
  getbookbyprogress,
  getbookbyresource,
  banner,
} from "../../api/http";
export default {
  name: "resourceCenter",
  data() {
    return {
      leftValue: "", //左侧悬浮栏值
      gundongTop: 0, //滚动条高度
      zyzxMsg: {}, //资源数据汇总信息
      base_title: "123", //当前计划名称标题
      kejianbooks_title: "", //当前学习的书本名
      kejianchapters_title: "", //当前学习的目录名
      timeline_title: "", //当前学习的关键时间节点名
      jxjh_edit: "", //是否有权力编写教学计划
      //用于顶部日期时间尺子
      monthNow: "", //当前几月
      currentMonthCount: 0, //本月天数
      nextMonthCount: 0, //下个月天数
      fenlei_radio: 1, //试卷分类值
      scrollY: 0, //资源库距离顶部位置

      scolorTime: "", //时间尺绿色开始日期
      ecolorTime: "", //时间尺绿色开始日期
      smonth: "", //计划开始的月份
      emonth: "", //计划结束的月份
      kejianbao_nums: "", //资源包数量
      kejian_nums: "", //资源数量

      timeStamp2String, //时间戳转时间的函数
      //资源包信息介绍
      dingzhiNj_id: "", //用户个人当前的年级id
      //资源包下的教研课的视频列表

      dingzhiRadio: "1", //定制切换栏按钮默认值

      //高一高二
      gyezyLists: [], //教师教研课件包资
      gyespLists: [], //教师教学课件包数量
      gyezy1: 0, //高一二部分教师教研资源数量
      gyezy2: 0, //高一二部分教师教学资源数量
      gyezy3: 0, //高一二部分学生学习资源数量

      gyesp1: 0, //高一二部分教师教研视频数量
      gyesp2: 0, //高一二部分教师教学视频数量
      gyesp3: 0, //高一二部分学生学习视频数量

      radio: "1", //调查有用没用
      beikeFlag: false, //资源包hover样式切换
      n: 0, //当前鼠标移动到的资源包的id

      //高三部分

      //，初始默认内容由个人信息和当前目录版本信息里获取。
      kejianbooks_id: 0, //书本id
      kemu_id: 0, //当前科目id
      nianji_id: 0, //当前年级id
      kejianfl_id: 1, //课件分类id
      kejiantagShow: false, //课件分类下的标签是否展示
      kejianversions_id: 0, //当前版本id
      kejianchapters_id: 0, //目录id
      systypes_id: 1, //系统大分类标签(1.课件.2.试卷.3.素材.4.专项)
      status: "", //状态
      fk_status: "", //是否反馈过
      yy_status: "1", //是否有用
      fkshow: true, //提交是否有用的显示隐藏

      //后期添加
      yilunBook_id: "", //一轮书本id
      erlunBook_id: "", //二轮书本id

      // 4.2  版本更新更改数据
      //顶部计划
      start_date: "", //当前计划开始时间
      end_date: "", //当前计划结束时间
      sTime: "", //开始的那一天
      eTime: "", //结束的那天
      before7: "", //开始前七天
      // 高一高二
      jsjyShow: false, //教师教研是否展示
      jsjyzyb: [], //教师教研列表
      jsjysp: [], //教师教研视频

      jsjxShow: false, //教师教学是否展示
      jsjxzyb: [], //教师教学列表
      jsjxsp: [], //教师教学视频

      xsxxShow: false, //学生学习是否展示
      xsxxzyb: [], //学生学习列表
      xsxxsp: [], //学生学习视频

      // 高三
      yilunCHlist: [], //一轮语文复习数据
      erlunCHlist: [], //二轮语文复习数据
      yilunCHshow: false, //一轮语文是否展示
      erlunCHshow: false, //二轮语文是否展示

      yilunENlist: [], //一轮英语复习数据
      erlunENlist: [], //二轮英语复习数据
      yilunENshow: false, //一轮英语是否展示
      elunENshow: false, //二轮英语是否展示
      newLists: [], //最新资源
      sucaiLists: [], //素材

      prList: [], //推荐产品列表

      zydyList: [], //资源订阅列表
      hotsearchbooklist: [], //产品图书热门搜索榜

      //新加
      beizhanPicLists: [], //备战高考图片列表
    };
  },
  created() {
    console.log($(window).width(), "浏览器宽度");
    console.log(this.$route.query, "query参数");
    this.gundongTop = this.$route.query.Top;
    document.documentElement.scrollTop = this.gundongTop ? this.gundongTop : 0; 
    
    // //回到顶部
    // $(document).ready(function () {
    //   $(window).scrollTop(this.$route.query.Top );
    // });
    this.getuserinfo(); //获取精选资源数据

    this.getbookbyprogress(); //获取主页资源内嵌产品
  },
  watch: {},
  mounted() {
    if(this.$route.query.leftValue){
      setTimeout(()=>{
      this.goToAnchor('#beizhan', 6)
    },500)
    }
    
    let caidan = document.querySelector(".floatingLeft");
    if ($(window).width() >= 1520) {
      caidan.style.left = ($(window).width() - 1500) / 2 + "px";
      caidan.style.top = "200px";
    } else {
      caidan.style.left = "20px";
      caidan.style.top = "200px";
    }
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
    window.addEventListener("resize", this.getWindowSize, true);
  },

  methods: {
    //获取当前用户信息
    getuserinfo() {
      userinfo({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        //试用未过期
        if (res.retRes.sy_end_time * 1000 > Date.parse(new Date())) {
          const data = res.retRes;
          this.jxjh_edit = data.jxjh_edit; //是否有权力编写教学计划
          this.dingzhiNj_id = data.nianji_id; //用户个人当前的年级id
          this.getKemu(); //获取科目
          
        } else if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
          //已过期去重新登录
          this.$router.push({
            name: "Login",
            query: {
              isgq: 1,
            },
          });
        }
      });
    },
    //获取当前科目和版本
    getKemu() {
      //获取当前科目和版本
      nowkemu({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "当前科目和版本");
          const data = res.retRes;
          //如果当前的版本或科目为0，跳转到选择版本页
          if (data.kejianversions_id == 0 || data.kemu_id == 0) {
            this.$alert("您还未选择学科或版本，请先前往选择", "温馨提示", {
              confirmButtonText: "确定",
              callback: () => {
                this.$router.push({
                  name: "ChangeClass",
                });
              },
            });
            //如果当前的计划开始时间结束时间不存在或科目为0，跳转到设置教学计划
          } else if (data.have_plan == 0) {
            this.$alert("您目前还没有教学计划，请先前往设置", "温馨提示", {
              confirmButtonText: "确定",
              callback: () => {
                this.$router.push({
                  name: "MyTeachPlan",
                });
              },
            });
          } else {
            this.kemu_id = data.kemu_id; //当前科目id
            this.kejianversions_id = data.kejianversions_id;
            this.kejianchapters_title = data.kejianchapters_title;
            this.timeline_title = data.timeline.title;
            this.getzyall(); //获取资源汇总
            this.list_kejiandingyue_tj();
            this.getbook(); // 获取精选资源参考资料数据
            this.getnewziyuan(); //获取最新资源
            this.getsucai(); //获取素材
          }
        }
      });
    },
    //获取资源汇总
    getzyall() {
      if (this.dingzhiNj_id != 11) {
        this.leftValue = 1;
        //获取进入页面后上半部分的资源包和当前计划的高一高二相关数据
        zyzxinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "课件包数据信息汇总");
            const data = res.retRes;
            this.base_title = data.base_title;
            if (data.start_date) {
              this.start_date = data.start_date; //教学计划开始时间
            } else {
              this.start_date = "none";
            }
            this.end_date = data.end_date; //教学计划结束时间
            this.sTime = new Date(this.start_date).getTime(); //开始日期
            this.eTime = new Date(this.end_date).getTime(); //结束日期
            // console.log(this.sTime,this.eTime)
            this.before7 = this.sTime - 7 * 3600 * 1000 * 24;
            this.zyzxMsg = data; //汇总信息
            this.fk_status = data.fk_status;
            this.jsjyzyb = data.info_1.zy_lists;
            this.jsjysp = data.info_1.sp_lists;
            if (this.jsjyzyb.length == 0 && this.jsjysp.length == 0) {
              this.jsjyShow = false;
            } else {
              this.jsjyShow = true;
            }
            this.jsjxzyb = data.info_2.zy_lists;
            this.jsjxsp = data.info_2.sp_lists;
            if (this.jsjxzyb.length == 0 && this.jsjxsp.length == 0) {
              this.jsjxShow = false;
            } else {
              this.jsjxShow = true;
            }
            this.xsxxzyb = data.info_3.zy_lists;
            this.xsxxsp = data.info_3.sp_lists;
            if (this.xsxxzyb.length == 0 && this.xsxxsp.length == 0) {
              this.xsxxShow = false;
            } else {
              this.xsxxShow = true;
            }
            if (this.jsjyShow) {
              this.leftValue = 1;
            } else if (!this.jsjyShow && this.jsjxShow) {
              this.leftValue = 2;
            } else if (!this.jsjyShow && !this.jsjxShow && this.xsxxShow) {
              this.leftValue = 3;
            } else {
              this.leftValue = 7;
            }
          }
        });
      } else {
        this.leftValue = 4;
        zyzxgs({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "高三资源中心信息汇总");
            const data = res.retRes;
            this.base_title = data.base_title;
            this.start_date = data.start_date; //教学计划开始时间
            this.end_date = data.end_date; //教学计划结束时间

            this.sTime = new Date(this.start_date).getTime(); //开始日期
            this.eTime = new Date(this.end_date).getTime(); //结束日期
            this.before7 = this.sTime - 7 * 3600 * 1000 * 24;

            this.zyzxMsg = data; //汇总信息
            this.fk_status = data.fk_status;
            this.yilunBook_id = data.info_1.kejianbooks_id;
            this.erlunBook_id = data.info_2.kejianbooks_id;
            //备战高考内容
            banner({
              md5key: localStorage.getItem("md5key"),
              systypes_id: 10008,
              device_type_id: 201,
            }).then((res) => {
              console.log(res, "备战高考内容图片");
              this.beizhanPicLists = res.retRes;
            });
            //如果是语文
            if (this.kemu_id == 1) {
              this.yilunCHlist = this.zyzxMsg.info_1.zx_lists;
              this.erlunCHlist = this.zyzxMsg.info_2.zx_lists;
              this.yilunCHshow = this.yilunCHlist.length == 0 ? false : true;
              this.erlunCHshow = this.erlunCHlist.length == 0 ? false : true;
              if (this.yilunCHshow) {
                this.leftValue = 4;
              } else if (!this.yilunCHshow && this.erlunCHshow) {
                this.leftValue = 5;
              } else {
                this.leftValue = 7;
              }
            } else if (this.kemu_id == 3) {
              // 如果是英语
              this.getgsen(); //获取高三一轮英语资源
            }
          }
        });
      }
    },
    //获取高三英语资源
    getgsen() {
      chapterskejian({
        md5key: localStorage.getItem("md5key"),
        kejianbooks_id: this.yilunBook_id,
      }).then((res) => {
        console.log(res, "高三英语一轮");
        this.yilunENlist = res.retRes;
        chapterskejian_new({
          md5key: localStorage.getItem("md5key"),
          kejianbooks_id: this.erlunBook_id,
        }).then((res) => {
          console.log(res, "高三英语er轮");
          this.erlunENlist = res.retRes;
          //高三二轮英语
          list_kejian({
            md5key: localStorage.getItem("md5key"),
            kemu_id: this.kemu_id,
            nianji_ids: this.dingzhiNj_id,
            from_int: 10,
            of:"time",
            kejianversions_id: this.kejianversions_id,
            kejianbooks_id: this.erlunBook_id,
          }).then((res) => {
            console.log(res);
            // this.erlunENlist = res.retRes;
            this.yilunENshow = this.yilunENlist.length == 0 ? false : true;
            this.elunENshow = this.erlunENlist.length == 0 ? false : true;
            if (this.yilunENshow) {
              this.leftValue = 4;
            } else if (!this.yilunENshow && this.elunENshow) {
              this.leftValue = 5;
            } else {
              this.leftValue = 7;
            }
          });
        });
      });
      // chapterskejian({
      //   md5key: localStorage.getItem("md5key"),
      //   kejianbooks_id: this.erlunBook_id,
      // }).then((res) => {
      //   console.log(res, "高三英语er轮");
      //   this.erlunENlist = res.retRes;
      // });
    },
    //获取主页产品推荐
    getbookbyprogress() {
      getbookbyprogress({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        console.log(res, "产品推荐");
        if (res.retRes.length > 3) {
          this.prList = res.retRes.slice(0, 3);
        } else {
          this.prList = res.retRes;
        }
      });
    },
    //获取右侧资源订阅列表
    list_kejiandingyue_tj() {
      list_kejiandingyue_tj({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        nianji_ids: this.dingzhiNj_id,
      }).then((res) => {
        console.log(res, "资源订阅列表");
        if (res.retRes.length > 3) {
          this.zydyList = res.retRes.slcie(0, 3);
        } else {
          this.zydyList = res.retRes;
        }
      });
    },
    //前往教学计划
    goplan() {
      this.$router.push({
        name: "MyTeachPlan",
      });
    },
    //是否有用按钮切换事件
    youyong(e) {
      // console.log(e)
      this.yy_status = e;
      console.log(this.yy_status);
    },
    //前往图书详情页
    productDetails(id, type_id) {
      console.log(id, type_id);
      if (type_id == 1) {
        this.$router.push({
          name: "ProductDetails",
          query: {
            id: id,
          },
        });
      } else if (type_id == 2) {
        this.$router.push({
          name: "ClassOnline",
          query: {
            id: id,
          },
        });
      } else if (type_id == 3) {
        this.$router.push({
          name: "JingtingDetails",
          query: {
            id: id,
          },
        });
      }
    },
    //提交反馈
    submitTest() {
      zyzxfk({
        md5key: localStorage.getItem("md5key"),
        yy_status: this.yy_status,
      }).then((res) => {
        // console.log(this.yy_status)
        this.fkshow = false;
        if (res.retInt == 1) {
          console.log(this.yy_status);
          if (this.yy_status == 1) {
            this.$notify({
              message: "感谢您的鼓励，我们会再接再厉的!",
              duration: 5000,
              showClose: false,
            });
          } else {
            this.$notify({
              message: "感谢您的建议，我们会继续努力的!",
              duration: 5000,
              showClose: false,
            });
          }
        }
      });
    },
    //获取精选页精品试卷
    getnewziyuan() {
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        nianji_ids: this.dingzhiNj_id,
        kemu_id: this.kemu_id,
        kejianversions_id: this.kejianversions_id,
        of:"time",
        type_id: 2,
        from_int: 10,
      }).then((res) => {
        console.log(res, "精品试卷");
        if (res.retRes.length > 10) {
          this.newLists = res.retRes.slice(0, 10);
        } else {
          this.newLists = res.retRes;
        }
      });
    },
    //获取精选页素材
    getsucai() {
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        nianji_ids: this.dingzhiNj_id,
        kemu_id: this.kemu_id,
        kejianversions_id: this.kejianversions_id,
        of:"time",
        type_id: 3,
      }).then((res) => {
        console.log(res, "素材");
        if (res.retRes.length > 10) {
          this.sucaiLists = res.retRes.slice(0, 10);
        } else {
          this.sucaiLists = res.retRes;
        }
      });
    },
    //前往资源订阅
    gosubscription() {
      this.$router.push({
        name: "Subscription",
      });
    },
    //前往资源订阅详情页
    goSubDeta(id) {
      this.$router.push({
        name: "SubscriptionDetails",
        query: {
          id: id,
        },
      });
    },
    //获取右侧图书推荐
    getbook() {
      getbookbyresource({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id, //默认产品分类为高中语文
      }).then((res) => {
        console.log(res, "产品首页中心");
        const data = res.retRes;
        if (data.length > 5) {
          this.hotsearchbooklist = res.retRes.slice(0, 5); //热搜榜列表
        } else {
          this.hotsearchbooklist = res.retRes; //热搜榜列表
        }

        console.log(this.hotsearchbooklist);
      });
    },
    //前往图书详情页
    productDetails(id, type_id) {
      console.log(id, type_id);
      if (type_id == 1) {
        this.$router.push({
          name: "ProductDetails",
          query: {
            id: id,
          },
        });
      } else if (type_id == 2) {
        this.$router.push({
          name: "ClassOnline",
          query: {
            id: id,
          },
        });
      } else if (type_id == 3) {
        this.$router.push({
          name: "JingtingDetails",
          query: {
            id: id,
          },
        });
      }
    },
    //左边悬浮窗锚点定位
    goToAnchor(selector, index) {
      const select = document.querySelector(selector);
      let scrollHeight = select.offsetTop - 80;
      console.log(scrollHeight);
      window.scrollTo({
        top: scrollHeight,
        behavior: "smooth",
      });
      this.leftValue = index;
    },
    //前往高三英语词汇语法页
    gochyf(id, title, type) {
      this.$router.push({
        name: "Gszy",
        query: {
          type: 0,
          kemu_id: this.kemu_id,
          nianji_id: this.dingzhiNj_id,
          kejianbooks_id:
            type == 1
              ? this.zyzxMsg.info_1.kejianbooks_id
              : this.zyzxMsg.info_2.kejianbooks_id,
          kejianchapters_id: id,
          path: this.$route.path,
          routeName: "精选资源",
          title: title,
        },
      });
    },
    //前往备战高考
    beizhanUrl(href){
      const url = this.$route.path +'?tapvalue='+this.tabvalue + '&isIndex=1' + '&leftValue=6'
      window.open(href + '&path='+ url + '&routeName='+'精选资源', "_blank");
    },
    //调整教学计划
    goEditPlan() {
      this.$router.push({
        name: "MyTeachPlan",
      });
    },
    //前往高三专项资源列表
    gogszx(
      kejianbooks_id,
      kejianchapters_id,
      kejianfl_id,
      kejiantag_id,
      kemu_id,
      nianji_id,
      title,
      type_id,
      index,
      list
    ) {
      //将专项数组删除点点击的那个一起传过去
      localStorage.setItem("zxArr", JSON.stringify(list));
      //把当前选中的定制tap分类也带过去，方便判断是否是试卷
      // console.log(JSON.parse(JSON.stringify(arr)))
      this.$router.push({
        name: "Gszx",
        query: {
          kejianbooks_id: kejianbooks_id,
          kejianchapters_id: kejianchapters_id,
          kejianfl_id: kejianfl_id,
          kejiantag_id: kejiantag_id,
          kemu_id: kemu_id,
          nianji_id: nianji_id,
          title: title,
          type: 0,
          type_id: type_id,
          index: index,
          path: this.$route.path,
          routeName: "精选资源",
        },
      });
    },
    //前往校验课内容
    goJiaoyanclass(jyjxk_id) {
      this.$router.push({
        name: "JiaoyanClass",
        query: {
          id: jyjxk_id,
          path: this.$route.path,
          routeName: "精选资源",
        },
      });
    },
    //精品试卷查看更多
    sjseemore() {
      this.$router.push({
        name: "ResourceTb",
        query: {
          from: "resourceJx",
          fliter: "sj",
          Top:0,
        },
      });
    },
    //精选素材查看更多
    scseemore() {
      this.$router.push({
        name: "ResourceTb",
        query: {
          from: "resourceJx",
          fliter: "sc",
          Top:0,
        },
      });
    },
    //点击课件前往课件详情
    goresDetails(id, lx, suffix) {
      console.log(id, lx);
      //有分类型，并且类型为贝壳资源包
      if (lx && lx == 2 && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/beikeziyuan",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            path: this.$route.path,
            routeName: "精选资源",
          },
        });
        window.open(href, "_blank");
        //有分类型，并且类型为课件
      } else if (lx && lx == 1 && suffix != "rar" && suffix != "zip") {
        // console.log("推荐课件")
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            path: this.$route.path,
            routeName: "精选资源",
          },
        });
        window.open(href, "_blank");
        //非推荐，全部为正常课件
      } else if (!lx && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            path: this.$route.path,
            routeName: "精选资源",
          },
        });
        window.open(href, "_blank");
      } else if (suffix == "rar" || suffix == "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/zipResDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            path: this.$route.path,
            routeName: "精选资源",
          },
        });
        window.open(href, "_blank");
      }
    },
    //滚动监听
    handleScrollY() {
      //右侧置顶功能
      const left = document.querySelector(".left");
      const right = document.querySelector(".rightContent");
      const fenge = document.querySelector(".fenge");

      if (left.getBoundingClientRect().top < 80) {
        right.style.position = "fixed";
        right.style.top = 80 + "px";
      } else if (left.getBoundingClientRect().top > 80) {
        right.style.position = "static";
        right.style.top = 0 + "px";
      }

      const proHeight =
        fenge.getBoundingClientRect().top -
        right.getBoundingClientRect().bottom;
      if (proHeight < 0) {
        right.style.top = 80 + proHeight + "px";
      }

      // 左侧悬浮框双向定位
      const leftInfo = [
        {
          index: 7,
          name: "zuixinziyuan",
          height: document
            .querySelector("#zuixinziyuan")
            .getBoundingClientRect().bottom,
        },
        {
          index: 8,
          name: "jingxuansucai",
          height: document
            .querySelector("#jingxuansucai")
            .getBoundingClientRect().bottom,
        },
      ];
      if (this.jsjyShow) {
        leftInfo.push({
          index: 1,
          name: "jsjy",
          height: document.querySelector("#jsjy").getBoundingClientRect()
            .bottom,
        });
      }
      if (this.jsjxShow) {
        leftInfo.push({
          index: 2,
          name: "jsjx",
          height: document.querySelector("#jsjx").getBoundingClientRect()
            .bottom,
        });
      }
      if (this.xsxxShow) {
        leftInfo.push({
          index: 3,
          name: "xsxx",
          height: document.querySelector("#xsxx").getBoundingClientRect()
            .bottom,
        });
      }
      if (this.yilunCHshow || this.yilunENshow) {
        leftInfo.push({
          index: 4,
          name: "yilun",
          height: document.querySelector("#yilun").getBoundingClientRect()
            .bottom,
        });
      }
      if (this.erlunCHshow || this.elunENshow) {
        leftInfo.push({
          index: 5,
          name: "erlun",
          height: document.querySelector("#erlun").getBoundingClientRect()
            .bottom,
        });
      }
      if (this.beizhanPicLists.length !=0) {
        leftInfo.push({
          index: 6,
          name: "beizhan",
          height: document.querySelector("#beizhan").getBoundingClientRect()
            .bottom,
        });
      }
      leftInfo.sort((a, b) => {
        return a.height - b.height;
      });

      // console.log(leftInfo)
      this.leftValue = leftInfo.find((item) => item.height - 400 >= 0).index;
    },
    //窗口大小监听
    getWindowSize() {
      const floatingLeft = document.querySelector(".floatingLeft");
      // console.log($(window).width())
      if ($(window).width() >= 1520) {
        floatingLeft.style.left = ($(window).width() - 1500) / 2 + "px";
        floatingLeft.style.top = "200px";
      } else {
        floatingLeft.style.left = "20px";
        floatingLeft.style.top = "200px";
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
    window.removeEventListener("resize", this.getWindowSize, true);
  },
};
</script>
<style>
/* 弹窗相关 */
.el-message-box__headerbtn .el-message-box__close {
  display: none;
}
.el-button--primary {
  background-color: #08a579 !important;
  border-color: #08a579 !important;
}
/* 用于资源库书本选中 */
.el-tree-node__content {
  margin: 8px 0 8px 20px;
  color: #333;
  font-weight: 600;
}
.el-tree-node__label {
  font-weight: 400;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-tree-node:focus > .el-tree-node__content {
  color: #08a579;
}
.el-tree__empty-block {
  height: 0 !important;
  display: none;
}
.el-collapse-item__wrap {
  border: 0;
  height: auto !important;
  transition: 0s;
}
.el-collapse-item__content {
  padding-bottom: 0;
  height: auto !important;
}
.el-collapse {
  border-top: 0;
}
</style>
<style lang="less" scoped>
#container {
  width: 100%;
  min-height: 40vh;
  .caidan {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    .floatingLeft {
      position: fixed;
      top: 200px;
      width: 120px;
      background: #ffffff;
      border-radius: 4px;
      z-index: 1;
      ul {
        cursor: pointer;
        li {
          text-align: center;
          line-height: 48px;
          width: 120px;
          height: 48px;
          border-radius: 4px;
          font-size: 14px;
          color: #333;
        }
        li:hover {
          background: #08a579;
          color: #fff;
        }
      }
      .choseLi {
        background: #08a579;
        color: #fff;
      }
    }
  }
  .plan {
    margin: 0 auto;
    margin-top: 20px;
    width: 1200px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    .title {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 16px;
      h3 {
        margin-left: 20px;
        font-size: 18px;
        color: #333;
      }
      .change {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        width: 140px;
        height: 32px;
        background: #ebfaf5;
        border-radius: 16px;
        color: #08a579;
        font-size: 14px;
        img {
          margin-right: 4px;
          width: 14px;
          height: 14px;
        }
      }
    }
    .jindu {
      display: flex;
      align-items: center;
      .msg {
        margin-left: 20px;
        margin-bottom: 35px;
        span {
          color: #999;
          font-size: 14px;
        }
        p {
          width: 250px;
          margin-top: 5px;
          color: #333;
        }
      }
      .jihuatips {
        display: flex;
        // align-items: center;
        margin-left: 50px;
        position: relative;
        color: #333;
        .startTitle {
          position: absolute;
          top: -42px;
          left: 23%;
          width: 180px;
          text-align: center;
        }
        .endTitle {
          position: absolute;
          top: -42px;
          left: 55%;
          width: 180px;
          text-align: center;
        }
        img {
          position: relative;
          top: -10px;
          width: 28px;
          height: 28px;
        }
        .jdt {
          width: 245px;
          height: 8px;
          background: #08a579;
        }

        .ing {
          position: relative;
          left: 1px;
          p {
            position: absolute;
            top: 15px;
            width: 240px;
            text-align: center;
            span {
              display: inline-block;
              width: 40%;
            }
          }
        }
        .jhstart {
          position: relative;
          left: 2px;
          span {
            display: inline-block;
            position: absolute;
            top: 22px;
            left: -50%;
            width: 54px;
            color: #999;
            text-align: center;
          }
        }

        .finished {
          position: relative;
          left: 3px;
          p {
            position: absolute;
            top: 15px;
            width: 240px;
            text-align: center;
          }
        }
        .jhbefore {
          position: relative;
          left: 4px;
          span {
            display: inline-block;
            position: absolute;
            top: 22px;
            left: -50%;
            width: 54px;
            color: #999;
            text-align: center;
          }
        }
        .jhend {
          position: relative;
          left: 4px;
          span {
            display: inline-block;
            position: absolute;
            top: 22px;
            left: -50%;
            width: 54px;
            color: #999;
            text-align: center;
          }
        }
      }
    }
  }
  .content {
    display: flex;
    margin: 0 auto;
    margin-top: 20px;
    width: 1200px;
    min-height: 600px;
    .left {
      width: 800px;
      .noplan {
        position: relative;
        margin-bottom: 20px;
        width: 800px;
        height: 240px;
        background-image: url("../../assets/img/4.2/4.2noplan.png");
        background-size: 100%;
        background-repeat: no-repeat;
        .msg {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-70%);
          h4 {
            margin-bottom: 14px;
            font-size: 20px;
            color: #08a579;
          }
          p {
            font-size: 14px;
            color: #969699;
            a {
              color: #08a579;
              cursor: pointer;
              border-bottom: 1px solid #08a579;
            }
          }
        }
      }
      .zyb {
        margin-bottom: 20px;
        width: 800px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .boxTitle {
          margin: 18px;
          font-size: 18px;
          color: #333;
        }
        .ziyuanbaoLists {
          display: flex;
          margin-left: 20px;
          margin-bottom: 10px;
          width: 760px;
          background: #f5f7fa;
          border-radius: 10px;
          .pic {
            margin: 30px;
            width: 60px;
            img {
              width: 60px;
            }
          }
          .msg {
            position: relative;
            margin-top: 16px;
            cursor: pointer;
            .kejiantitle {
              font-size: 14px;
              color: #333;
              width: 528px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2; // 控制多行的行数
              -webkit-box-orient: vertical;
            }
            .ziyuanbaodetails {
              margin-top: 5px;
              span {
                color: #626366;
                font-size: 12px;
                a {
                  color: #f6444e;
                }
              }
              .leixing {
                display: inline-block;
                margin: 0 6px;
                width: 40px;
                height: 18px;
                background: #e6edfa;
                border-radius: 2px;
                text-align: center;
                line-height: 18px;
                color: #216efa;
              }
            }
            .bottom {
              position: absolute;
              bottom: 15px;
              color: #939599;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
            }
          }
        }
        .ziyuanbaoLists:last-child {
          margin-bottom: 20px;
        }
        .ziyuanbaoLists:hover {
          .msg {
            .kejiantitle {
              color: #08a579;
            }
          }
        }
        .jiaoxueke {
          width: 800px;
          .jiaoyan {
            margin-top: 20px;
            width: 800px;
            display: flex;
            flex-wrap: wrap;
            .box {
              margin-left: 20px;
              margin-bottom: 18px;
              background-color: #fff;
              border-radius: 10px;
              cursor: pointer;
              img {
                margin-bottom: 7px;
                width: 240px;
                height: 136px;
                border-radius: 10px;
              }
              .activename {
                margin-bottom: 14px;
                width: 218px;
                font-size: 14px;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
              }
              p {
                font-size: 12px;
                color: #939599;
              }
            }
            .box:hover {
              // transition: 1s;
              img {
                transition: 0.5s;
                // position: relative;
                // top: -10px;
                transform: translateY(-10px);
                box-shadow: 0px 2px 10px 2px #dedede;
              }
              .activename {
                color: #08a579;
              }
            }
          }
        }
      }
      .test {
        display: flex;
        margin-bottom: 40px;
        line-height: 36px;
        width: 540px;
        height: 36px;
        background: #ffffff;
        border: 1px solid #dee0e3;
        border-radius: 4px;
        p {
          margin-left: 21px;
          margin-right: 50px;
          color: #646566;
          font-size: 14px;
        }
        .el-radio {
          margin-top: 10px;
          // margin-left: 35px;
        }
        button {
          position: relative;
          left: 103px;
          width: 80px;
          height: 36px;
          color: #ffffff;
          background: #08a579;
          border: 0;
          border-radius: 4px;
          cursor: pointer;
        }
        /deep/.el-radio__input.is-checked .el-radio__inner {
          border-color: #08a579;
          background: #08a579;
        }
        /deep/.el-radio__input.is-checked + .el-radio__label {
          color: #08a579;
        }
      }
      .productLists {
        display: flex;
        align-items: center;
        margin-left: 20px;
        margin-bottom: 20px;
        width: 680px;
        background: #f5f7fa;
        border-radius: 10px;
        cursor: pointer;
        .pic {
          margin: 19px 25px 21px 27px;
          text-align: center;
          width: 80px;
          height: 80px;
          img {
            max-height: 80px;
            object-fit: cover;
          }
        }
        .msg {
          .booktitle {
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
          }
          // .author {
          //   font-size: 12px;
          //   color: #939599;
          // }
          .author {
            width: 400px;
            font-size: 12px;
            color: #939599;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; // 控制多行的行数
            -webkit-box-orient: vertical;
          }
        }
        .goProduct {
          margin-left: 30px;
          width: 90px;
          height: 30px;
          background-color: #08a579;
          border-radius: 4px;
          color: #fff;
          text-align: center;
          line-height: 30px;
        }
      }
      .productLists:hover {
        .booktitle {
          color: #08a579;
        }
      }
      .ziyuan {
        // margin-bottom: 20px;
        width: 800px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .boxTitle {
          display: flex;
          justify-content: space-between;
          margin: 18px;
          font-size: 18px;
          color: #333;
          p {
            font-size: 12px;
            color: #999;
            cursor: pointer;
          }
        }
        .boxTitle:hover {
          p {
            color: #08a579;
          }
        }
        .ziyuancontent {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-bottom: 10px;
          .ziyuanLists {
            display: flex;
            align-items: center;
            margin-right: 22px;
            line-height: 34px;
            cursor: pointer;
            img {
              margin-left: 20px;
              margin-right: 5px;
              width: 18px;
              height: 22px;
            }
            p {
              width: 333px;
              color: #333;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1; // 控制多行的行数
              -webkit-box-orient: vertical;
               img{
                margin: 0;
                margin-left: 5px;
                height: 12px;
                width: auto;
              }
            }
          }
          .ziyuanLists:hover {
            p {
              color: #08a579;
            }
          }
        }
      }
      .zuixinziyuan {
        margin-bottom: 20px;
      }
      .gaosan {
        .yilun {
          margin-bottom: 20px;
          width: 800px;
          background-color: #fff;
          border-radius: 10px;
          overflow: hidden;
          .yiluntitle {
            margin: 18px;
            h4 {
              font-size: 18px;
              color: #333;
            }
          }
          .piclists {
            margin-left: 20px;
            img {
              margin-right: 30px;
              margin-bottom: 20px;
              width: 192px;
              height: 113px;
              cursor: pointer;
            }
          }
        }
        .erlunyw {
          margin-bottom: 20px;
          width: 800px;
          background-color: #fff;
          border-radius: 10px;
          overflow: hidden;
          .erluntitle {
            margin: 18px;
            h4 {
              font-size: 18px;
              color: #333;
            }
          }
          .piclists {
            margin-left: 20px;
            img {
              margin-right: 30px;
              margin-bottom: 20px;
              width: 192px;
              height: 113px;
              cursor: pointer;
            }
          }
        }
        .erlun {
          margin-bottom: 20px;
          width: 800px;
          background: #ffffff;
          border-radius: 10px;
          overflow: hidden;
          cursor: pointer;
          .erluntitle {
            margin: 18px;
            h4 {
              font-size: 18px;
              color: #333;
            }
          }
          .kejianbox {
            display: flex;
            margin-left: 20px;
            margin-bottom: 10px;
            width: 760px;
            background: #f5f7fa;
            border-radius: 10px;
            .pic {
              margin: 26px 30px;
              width: 59px;
              height: 67px;
              img {
                width: 59px;
              }
            }
            .msg {
              display: flex;
              flex-direction: column;
              .boxtitle {
                p {
                  margin-top: 26px;
                  margin-bottom: 18px;
                  width: 528px;
                  font-size: 14px;
                  color: #333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2; // 控制多行的行数
                  -webkit-box-orient: vertical;
                }
              }
              .bottom {
                display: flex;
                align-items: center;
                color: #999;
                .upTime {
                  margin-right: 20px;
                }
                .seeNum {
                  i {
                    margin-right: 5px;
                  }
                }
                .rate {
                  display: flex;
                  margin-right: 38px;
                  width: 148px;
                }
                /deep/.el-rate__icon {
                  margin-right: 0;
                }
              }
            }
          }
          .kejianbox:hover {
            .boxtitle {
              p {
                color: #08a579;
              }
            }
          }
        }
        .beizhan {
          margin-bottom: 20px;
          width: 800px;
          background-color: #fff;
          border-radius: 10px;
          overflow: hidden;
          .yiluntitle {
            margin: 18px;
            h4 {
              font-size: 18px;
              color: #333;
            }
          }
          .piclists {
            margin-left: 20px;
            img {
              margin-right: 30px;
              margin-bottom: 20px;
              width: 148px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .right {
      margin-left: 20px;
      width: 380px;
      overflow: hidden;
      .rightContent {
        position: static;
        top: 80px;
        .ziyuandingyue {
          width: 380px;
          background: #ffffff;
          border-radius: 10px;
          overflow: hidden;
          cursor: pointer;
          .dingyuetitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 18px;
            margin-bottom: 17px;
            .boxtitle {
              display: flex;
              align-items: center;
              margin-left: 20px;
              img {
                margin-right: 4px;
                width: 24px;
                height: 24px;
              }
              h4 {
                font-size: 18px;
                color: #333;
              }
            }
            .seemore {
              margin-right: 17px;
              font-size: 12px;
              color: #666;
              cursor: pointer;
            }
            .seemore:hover {
              color: #08a579;
            }
          }
          .dingyueLists {
            .dingyuebox {
              display: flex;
              align-items: center;
              margin-bottom: 20px;
              margin-left: 20px;
              width: 340px;
              height: 66px;
              background: #f5f7fa;
              border-radius: 4px;
              p {
                width: 215px;
                margin-left: 14px;
                font-size: 14px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
              }
              .dy {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 26px;
                width: 60px;
                height: 32px;
                background: #08a579;
                border-radius: 16px;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
                i {
                  position: relative;
                  top: 1px;
                  left: -2px;
                }
              }
              .yidingyue {
                background-color: #cccccc;
              }
            }
          }
        }
        .productTuijian {
          margin-top: 20px;
          .productLists {
            padding: 0 20px;
            padding-bottom: 20px;
            width: 340px;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            .boxtitle {
              display: flex;
              margin: 18px 0;
              img {
                margin-right: 6px;
                width: 24px;
                height: 24px;
              }
              h4 {
                font-size: 18px;
                color: #333;
              }
            }
            .boxHot {
              .qian3 {
                display: flex;
                padding: 10px 0;
                // padding-left: 20px;
                cursor: pointer;
                border: 1px solid #fff;
                .pic {
                  position: relative;
                  width: 106px;
                  height: 106px;
                  img {
                    position: absolute;
                    display: inline-block;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    // right: 0;
                    margin: auto;
                    max-width: 106px;
                    max-height: 106px;
                  }
                  span {
                    display: inline-block;
                    position: relative;
                    left: 0px;
                    text-align: center;
                    font-size: 18px;
                    color: #fff;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    background: #f85230;
                    border-radius: 4px;
                  }
                }
                .msg {
                  position: relative;
                  // margin-left: 15px;
                  h3 {
                    // margin-bottom: 26px;
                    margin-top: 10px;
                    width: 180px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: normal;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2; // 控制多行的行数
                    -webkit-box-orient: vertical;
                  }
                  p {
                    position: absolute;
                    bottom: 10px;
                    font-size: 14px;
                    color: #939599;
                  }
                  .goProduct {
                    margin-top: 15px;
                    width: 90px;
                    height: 30px;
                    background-color: #08a579;
                    border-radius: 4px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                  }
                }
              }
              .qian3:hover {
                // border: 1px solid #ddd;
                // box-shadow: 0 0 2px 2px #f8f8f8;
                h3 {
                  color: #08a579;
                }
              }
            }
            .lists {
              display: flex;
              // margin-left: 20px;
              margin-top: 10px;
              font-size: 14px;
              color: #333333;
              line-height: 24px;
              h4 {
                margin-right: 10px;
                color: #939599;
                font-size: 18px;
                // line-height: 18px;
              }
            }
            .lists:hover {
              cursor: pointer;
              h4 {
                color: #08a579;
              }
              p {
                color: #08a579;
              }
            }
          }
        }
      }
    }
  }
  .fenge {
    height: 20px;
  }
}
</style>
